<!DOCTYPE html>
<html class="iframe-h">

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>MY_PRO</title>
		<link rel="stylesheet" type="text/css" href="../../../static/admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../../../static/admin/css/admin.css" />
	</head>

	<body>
		<div class="wrap-container clearfix">
				<div class="column-content-detail">
					<form class="layui-form" action="">
						<div class="layui-form-item">
							<div class="layui-inline tool-btn">
								<button class="layui-btn layui-btn-small layui-btn-normal addBtn" data-url="jumpAddOrUpdateUser"><i class="layui-icon">&#xe654;</i></button>
							</div>
							<div class="layui-inline">
								<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
							</div>

							<button class="layui-btn layui-btn-normal" lay-submit="search">搜索</button>
						</div>
					</form>
					<div class="layui-form" id="table-list">
						<table class="layui-table" lay-even lay-skin="nob">
							<thead>
								<tr>
									<th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
									<th class="hidden-xs">ID</th>
									<th>用户名</th>
									<th class="hidden-xs">密码</th>
									<th>角色</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody id="table">

							</tbody>
						</table>
						<div id="page-wrap">

						</div>
					</div>
				</div>
		</div>
		<script th:src="@{static/admin/lib/jquery/jquery.min.js}"></script>
		<script th:src="@{static/admin/layui/layui.js}"></script>
		<script th:src="@{static/admin/js/core.js}"></script>
		<script th:src="@{static/admin/js/common.js}" type="text/javascript" charset="utf-8"></script>
	    <script>
			var currpage=1;
			var limit=20;
			var roleTable='';
			let openindex;
			var ids = new Array();　//创建一个数组
			$(function () {
				getRoleList(currpage);
			})
			function getRoleList(currpage){
				$.post("/getUserList",{current:currpage,limit:limit}, function (res) {
					var html="";
					layui.each(res.rows, function (index, row) {
						var roles = "";
						layui.each(row.roles, function (i, item) {
							roles += item.name + ",";
							ids.push(item.id)
						})
						if (roles !== "") {
							roles = roles.substr(0, roles.length - 1);
						}
						//模拟渲染
						html+= '<tr> ' +
								'<td><input type="checkbox" name="" lay-skin="primary" data-id="1"></td> ' +
								'<td class="hidden-xs" >'+(index+1)+'</td> <td>'+row.name+'</td> ' +
								'<td>'+row.password+'</td> ' +
								'<td>'+roles+'</td> ' +
								'<td> ' +
								'<div class="layui-inline"> ' +
								'<button class="layui-btn layui-btn-small layui-btn-normal edit-btn" data-url="jumpAddOrUpdateUser" data-id='+row.id+'><i class="layui-icon">&#xe642;</i>编辑</button>' +
								'<button class="layui-btn layui-btn-small layui-btn-warm " data-url="assignRole" onclick="btnAction(\''+row.id+'\')"><i class="layui-icon">&#xe654;</i>分配角色</button> ' +
								'<button class="layui-btn layui-btn-small layui-btn-danger del-btn" data-url="deleteUser" data-id='+row.id+'><i class="layui-icon">&#xe640;</i>删除</button> ' +
								'</div> ' +
								'</td> ' +
								'</tr>';
					})
					$("#table").html(html)

					layui.use(['laypage', 'layer'], function () {
						var laypage = layui.laypage
						laypage.render({
							elem: 'page-wrap',
							count: res.total,
							limit: limit,
							curr:currpage,
							jump: function (obj,first) {
								if (!first) {
									currpage=obj.curr
									getRoleList(currpage)
								}
							}
						});
					});
				});

			}
			function btnAction(userId){
				openindex = layer.open({
					type: 1,
					title: '分配角色',
					area: ['900px', '650px'], //宽高
					content: '<table class="layui-hide" id="tabledata" lay-filter="table"></table>' +
							' <span style="width: 150px;height: 45px;float: right">' +
								'<button  class="layui-btn layui-btn-primary" onclick="closelayer()">取消</button>' +
								'<button  class="layui-btn layui-btn-normal"  onclick="save(\''+userId+'\')">确定</button>' +
							'</span>  '
				});
				layui.use('table', function(){
					var table = layui.table;
						table.render({
							elem: '#tabledata',
							url:'/getRoleList',
							method:'post',
							id:'te',
							page: true,
							limit: 20, //每页默认显示的数量
							where : {
								"user.id":userId
					        },
					        request: {//请求携带的参数
								pageName: 'current', //页码的参数名称，默认：page
							},
							response: {
								statusName: 'status' //成功的状态码，默认：code
								,statusCode: null    //没有返回用null代替
								,countName: 'total' //数据总数的字段名称，默认：count
								,dataName: 'rows' //数据列表的字段名称，默认：data
							},
							cols: [
									[
								{type:'checkbox'}
								/*,{field:'id', title: 'ID'}*/
								,{field:'name', title: '用户名'}
								,{field:'description',title: '描述'}
								,{field:'createTime', title: '创建时间',sort:true}
							  ]
							]
				    });

					table.on('checkbox(table)', function(obj){
						let checkStatus = table.checkStatus('te');
						var checked = obj.checked;
						var type = obj.type; // all/one
						ids.splice(0,ids.length);//清空数组
						if(checkStatus.data.length>0){
							layui.each(checkStatus.data, function (i, row) {
								ids.push(row.id)
							})
						}
						console.log(ids);
					});
				});
			}

			//取消操作
			function closelayer(){
				layer.close(openindex);
			}

			//确认操作---给用户分配角色
			function save(userId){
				if(ids.length<=0){
					layer.msg("至少选择一个角色", {
						offset: '30%',
						time: 800
					})
				}else{
					$.post("/saveAssignRole",{roleIdStr:ids.toString(),userId:userId}, function (res) {
						if (res.status == 200) {
							layer.msg(res.msg, {
								offset: '30%',
								time: 800
							}, function () {
								//调用父页面的刷新
								window.refresh();
							});
						}else{
							layer.msg(res.msg, {
								icon: 2,
								offset: '30%',
								time: 2000
							});
						}
					})
				}
			}

		</script>
	</body>

</html>